<template>
  <div id="water">
    <m-header
      :systemName="systemName"
      :isSelect="false">
    </m-header>
    <Spin fix v-show="alarmLightLoading" size="large"></Spin>
    <audio id="mff" :src="voiceUrl" hidden loop="loop"></audio>
    <div class="electr-content">
      <!--          内容的头部-->
      <Row class="electr-head col-fff">
        <i-col span="24">
          <div class="sele-btn">
            <Select :value="workshop" @on-change="selectWorkshop" style="width:130px; margin-right: 10px"
                    :placeholder="''">
              <Option v-for="item in workshopArr" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <m-tabs :btnText="btnTextList" @changeBtn="toggleBtn" :activeDateBtn="activeBtnName"></m-tabs>
          </div>
          <div class="alarm">
            <div class="alert-img" @click="clickAlertIcon" :class="{alarmLight : !alarmLight}"></div>
            <div style="position: relative">
              <span class="alert-num">{{alarmNum}}</span>
              <Button :type="activeBtnName!=-1 ? 'primary' : 'warning'" style="width: 110px; height: 40px;"
                      @click="alarmMes">报警信息
              </Button>
            </div>
            <Button type="primary" style="width: 110px; height: 40px; margin-left: 10px;" @click="devDiagnose">设备诊断
            </Button>
          </div>
        </i-col>
      </Row>
      <div class="electr-main">
        <!--             主页面-->
        <div v-if="activeBtnName!=-1" class="workshop-page">
          <!--              上半部分-->
          <div class="up-list">
            <div class="row-lt">
              <div class="list-status">
                <p>
                  <span></span> 正常
                </p>
                <p>
                  <span></span> 异常
                </p>
              </div>
              <ul class="col-text">
                <li>负载范围</li>
                <li>电流</li>
                <li>功率</li>
                <li>管温</li>
              </ul>
            </div>
            <div class="row-rt">
              <div class="col-item" v-for="(item, index) in deviceArr1" :key="index">
                <div class="col-img" @click="item.id ? clickDeviceIcon(item) : ''">
                  <img :src="filterImg(item.status)" alt="">
                  <span :style="{color: item.status === 0 ? 'rgba(241, 25, 26, 1)': ''}">{{item.name}}</span>
                </div>
                <ul class="col-text">
                  <li v-for="(subItem, subIndex) in item.itemData"
                      :style="{color: subItem.status === 0 ? 'rgba(241, 25, 26, 1)': ''}" :key="subIndex">
                    {{subItem.value}}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!--              下半部分-->
          <div class="up-list down-list">
            <div class="row-lt">
              <div class="list-status">
                <p>
                  <span></span> 正常
                </p>
                <p>
                  <span></span> 异常
                </p>
              </div>
              <ul class="col-text">
                <li>负载范围</li>
                <li>电流</li>
                <li>功率</li>
                <li>管温</li>
              </ul>
            </div>
            <div class="row-rt">
              <div class="col-item" v-for="(item, index) in deviceArr2" :key="index">
                <div class="col-img" @click="item.id ? clickDeviceIcon(item) : ''">
                  <img :src="filterImg(item.status)" alt="">
                  <span :style="{color: item.status === 0 ? 'rgba(241, 25, 26, 1)': ''}">{{item.name}}</span>
                </div>
                <ul class="col-text">
                  <li v-for="(subItem, subIndex) in item.itemData"
                      :style="{color: subItem.status === 0 ? 'rgba(241, 25, 26, 1)': ''}" :key="subIndex">
                    {{subItem.value}}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="paging-btn" v-if="mainTotalPage > 1">
            <span class="up-btn" v-show="pageNum === 0">
              <img src="../../assets/waterImg/btn_pageup_disabled.png" alt="">
            </span>
            <span class="up-btn" v-show="pageNum > 0" @click="upPage">
              <img src="../../assets/waterImg/upbtn_selected.png" alt="">
            </span>
            <span class="drown-btn" v-show="pageNum < (mainTotalPage - 1)" @click="drownPage">
              <img src="../../assets/waterImg/btn_pageup_selected.png" alt="">
            </span>
            <span class="drown-btn" v-show="pageNum >= (mainTotalPage - 1)">
              <img src="../../assets/waterImg/drownbtn_disabled.png" alt="">
            </span>
          </div>
        </div>
        <!--              报警弹框-->
        <div class="model-bg" v-if="showAlarmMod">
          <div class="alarm-model">
            <div class="model-close" @click="closeModel">
              <img src="../../assets/waterImg/modal_close.png" alt="">
            </div>
            <div class="big-electr-icon">
              <div class="icon-off" @click="recover">
                <img
                  :src="!alarmLight ? require('../../assets/waterImg/btn_reset_selected.png') : require('../../assets/waterImg/btn_reset_default.png')"
                  alt="">
              </div>
              <p>复位</p>
            </div>
            <!--                  报警弹框表格-->
            <div class="model-table m-dark-table head-50 m-chart-table">
              <Table stripe :columns="colDatas" :data="tableData"></Table>
            </div>
          </div>
        </div>
        <!--             设备诊断-->
        <div class="model-bg" v-if="devdiagMod">
          <div class="diagnose-model">
            <div class="model-close" @click="closeModel">
              <img src="../../assets/waterImg/modal_close.png" alt="">
            </div>
            <div class="model-top">
              <div class="model-title">
                <span></span> 设备诊断
              </div>
              <div class="dev-num" :class="{'input-color' : btnLoading}">设备：<Input v-model="devNumber"
                                                                                   :disabled="btnLoading"
                                                                                   placeholder="设备名称/编号"
                                                                                   style="width:160px;"/>
                <Select :value="category"
                        :disabled="btnLoading"
                        @on-change="selectCate"
                        :placeholder="''" style="width:110px; margin-left: 30px">
                  <Option v-for="item in diagSelectArr" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </div>
            </div>
            <div class="model-center">
              <div v-show="tipMsg !== '' || modalContent.length < 0" style="color: rgba(241, 25, 26, 1)">{{tipMsg}}
              </div>
              <div class="model-content" v-for="(item, index) in modalContent" :key="index">
                <span>{{item.time}}</span>
                <span :style="{ color: item.status === 200 ? '' : 'rgba(241, 25, 26, 1)' }">{{item.msg}}</span>
              </div>
              <div class="data-diag model-content">
                <div v-for="(item, index) in diagDataStatus" :key="index">
                  <span>{{item.time}}</span>
                  <span :style="{ color: item.status === 1 ? '' : 'rgba(241, 25, 26, 1)' }">{{item.status === 1 ? '数据正常' : '数据异常'}} </span>
                  <span :style="{ color: item.status === 1 ? '' : 'rgba(241, 25, 26, 1)' }">{{item.name}} <em>{{item.data}}</em></span>
                </div>
              </div>
              <span v-show="btnLoading && modalContent.length > 0">诊断中...</span>
              <span
                v-show="!btnLoading && modalContent.length > 0 || tipMsg !== '' || modalContent.length < 0">诊断完成</span>
            </div>
            <div class="btn-defsize" :class="{'btn-dia': devNumber === '', 'btn-load': btnLoading}">
              <Button type="primary" :loading="btnLoading" :disabled="devNumber === ''"
                      style="margin-top: 50px; width: 200px; height: 50px; margin-left: 225px;" @click="toDiagnose">
                <span v-if="!btnLoading">诊断</span>
                <span v-else>诊断</span>
              </Button>
            </div>
          </div>
        </div>
        <!--            报警页面-->
        <div class="alert-page alarm" v-if="activeBtnName===-1">
          <!--              <div class="handle" @click="doHandle">处理</div>-->
          <!--              <div class="view" @click="lookHandleRes">查看</div>-->
          <Row style="margin-bottom: 40px">
            <Col span="6">
              <div :class="['alarm-btn' + index, { 'alarm-btn-active': processingView === item.id }]" class="alarm-btn"
                   v-for="(item, index) in btnList"
                   :key="index"
                   @click="clickBtnChange(item)">
                {{item.text}}
              </div>
            </Col>
            <Col span="18">
              <div id="alarm-right">
                <div class="alarm-input">
                  <Input search @on-search="searchClick" v-model="searchAlarm" placeholder="请输入母线/开关编号"/>
                </div>
                <!--                <span>时间选择 :</span>-->
                <!--                <DatePicker :clearable="false" type="daterange" :value="initDate" @on-change="dateChange"-->
                <!--                            placement="bottom-end" placeholder="请选择日期" style="width: 360px">-->
                <!--                </DatePicker>-->
                <m-date-picker :startTime="startTime" @startChange="startChange" @endChange="endChange"
                               :endTime="endTime">
                </m-date-picker>
                <div class="electr-head alarm-all">
                  <Select :value="classify" @on-change="selectAll"
                          :label-in-value="true"
                          style="width:110px; margin-left: 30px; text-align: left;" :placeholder="''">
                    <Option v-for="item in alarmClassifyList" :value="item.value" :key="item.value">{{ item.label }}
                    </Option>
                  </Select>
                </div>
                <Button :loading="lineLoading.btnActiveForm" type="primary" @click="downForm"
                        class="downForm-btn">下载表格
                </Button>
              </div>
            </Col>
          </Row>
          <div class="m-dark-table head-50 m-chart-table">
            <Table :loading="tableLoading" :columns="alarmTableColumns" stripe :data="alarmTable"></Table>
          </div>
          <div id="alarm-page">
            <Page :total="totalPage.total" :current="totalPage.current" :page-size="totalPage.pageSize"
                  @on-change="pageChange" show-total show-elevator/>
          </div>
          <!--            处理模态框-->
          <div class="model-bg" v-if="handleMod">
            <div class="handle-model">
              <div class="model-close" @click="closeModel">
                <img src="../../assets/waterImg/modal_close.png" alt="">
              </div>
              <div class="handle-way">
                <h5>处理方式</h5>
                <Input v-model="dealWay" type="textarea" :rows="7" :autosize="{maxRows:7,minRows: 7}" autofocus/>
              </div>
              <div class="handle-people">
                <h5>处理人</h5>
                <Input v-model="dealPeople" placeholder="请输入你的名字"/>
              </div>
              <Button style="margin-top: 50px; width: 200px; height: 50px; font-size: 20px; margin-left: 50px;"
                      type="primary" @click="confirmSub">确 定
              </Button>
            </div>
          </div>
          <!--              查看模态框-->
          <div class="model-bg" v-if="viewMod">
            <div class="look-model">
              <div class="model-close" @click="closeModel">
                <img src="../../assets/waterImg/modal_close.png" alt="">
              </div>
              <div class="handle-res same-style">
                <h5>处理结果</h5>
                <p>{{viewObj.handleRes}}</p>
              </div>
              <div class="handle-man same-style">
                <h5>处理人</h5>
                <p>{{viewObj.handleMan}}</p>
              </div>
            </div>
          </div>
        </div>
        <!--        :initDate="initLineDate" @dateChange="dateEchartsChange"-->
        <line-echarts ref="line"
                      :lineLoading="lineLoading"
                      :lineTitle="lineTitle"
                      :startTime="startLineTime"
                      @startChange="startChangeEcharts"
                      @endChange="endChangeEcharts"
                      :endTime="endLineTime"
                      :btnText="btnText"
                      :btnActive="btnActive"
                      :alarmPresetList="alarmPresetList"
                      @submitClick="submitClick"
                      @lineEchartsChange="lineEchartsChange"
                      @maskClose="maskClose"
                      @changeBtn="changeBtn"
                      @downForm="echartsDownForm"
        >

        </line-echarts>
      </div>
    </div>
  </div>
</template>

<script>
  import MHeader from '../../components/common/mHeader'
  import mTabs from '../../components/common/mTabs'
  import echarts from 'echarts'
  import LineEcharts from '../../components/common/lineEcharts'
  import {timerFun} from '../../components/common/mixin/tools'
  import {compareValue} from '../../components/common/mixin/tools.js'
  import {mapState} from 'vuex'
  import MDatePicker from '../../components/common/mDatePicker'

  export default {
    // 组件的名称供水
    name: 'water',
    // props 可以是数组或对象，用于接收来自父组件的数据
    props: {},
    // 数据绑定
    data () {
      return {
        // 报警灯声音
        voiceObj: null,
        voiceUrl: require('../../assets/voice/warn.mp3'),
        // 报警灯是否亮起以及定时刷新 报警灯 定时器
        alarmLight: 1,
        alarmLightLoading: false,
        statusTime: null,
        // 主页母线俩行列表的定时器
        conTimer: null,
        systemName: '管道加热测温系统', /* 顶部的系统名字  */
        // activeName: 'water',
        /* 内容头部数据 start */
        btnTextList: [{label: '1PO母线', value: 0}, {label: '2PO母线', value: 1}, {
          label: 'WB201母线',
          value: 2
        }, {label: 'WB202母线', value: 3}],
        activeBtnName: null,
        btnIndex: 0,
        alarmNum: 99,
        workshopArr: [],
        workshop: 1,
        showAlarmMod: false, // 控制显示报警复位模态框
        devdiagMod: false, // 设备诊断模态框
        devNumber: '',
        tipMsg: '',
        modalContent: [],
        // 诊断数据
        diagDataStatus: [],
        // 分类列表
        diagSelectArr: [],
        category: '全部',
        // categoryLabel: '全部',
        btnLoading: false,
        /* 内容头部数据 end */
        //
        /* 主页面数据 start */
        pageNum: 0,
        pageSize: 20,
        mainTotalPage: 0,
        // 设备
        devicesData: [],
        deviceArr1: [],
        // 设备
        deviceArr2: [],
        colDatas: [
          {
            title: '报警时间',
            key: 'alarmMessageTime',
            align: 'center',
            width: '220px'
          },
          {
            title: '报警车间',
            key: 'alarmWorkshop',
            align: 'center'
          },
          {
            title: '设备编号',
            key: 'devName',
            align: 'center'
          },
          {
            title: '设备项目',
            key: 'alarmTerm',
            align: 'center'
          },
          {
            title: '报警分类',
            key: 'alarmClassify',
            align: 'center'
          },
          {
            title: '报警值℃',
            key: 'alarmValue',
            align: 'center'
          }
        ],
        tableData: [],
        /* 主页面数据 end */
        //
        /* 报警页面数据 start */
        searchAlarm: '',
        processingView: 0,
        totalPage: {
          current: 1,
          total: 0,
          pageSize: 14
        },
        tableLoading: false,
        btnList: [
          {id: 0, text: '实时信息'},
          {id: 1, text: '归档信息'}
        ],
        // initDate: [new Date().format('yyyy-MM-dd'), new Date().format('yyyy-MM-dd')],
        startTime: new Date().format('yyyy-MM-dd'),
        endTime: new Date().format('yyyy-MM-dd'),
        startLineTime: new Date().format('yyyy-MM-dd'),
        endLineTime: new Date().format('yyyy-MM-dd'),
        alarmClassifyList: [
          {
            value: 1,
            label: '全部'
          },
          {
            value: 2,
            label: '上限报警'
          },
          {
            value: 3,
            label: '温差报警'
          },
          {
            value: 4,
            label: '下限报警'
          },
          {
            value: 5,
            label: '时限报警'
          }
        ],
        classify: 1,
        classifyLabel: '全部',
        alarmTableColumns: [
          {
            title: '时间',
            align: 'center',
            width: 250,
            key: 'alarmMessageTime'
          },
          {
            title: '报警车间',
            align: 'center',
            key: 'alarmWorkshop'
          },
          {
            title: '母线编号',
            align: 'center',
            key: 'busNumber'
          },
          {
            title: '开关编号',
            align: 'center',
            key: 'switchNumber'
          },
          {
            title: '报警项目',
            align: 'center',
            key: 'alarmTerm'
          },
          {
            title: '报警分类',
            align: 'center',
            key: 'alarmClassify'
          },
          {
            title: '报警值 ℃',
            align: 'center',
            key: 'alarmValue'
          },
          {
            title: '操作',
            key: 'operate',
            // width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    color: 'rgba(76,144,253,1)',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      if (this.processingView === 0) {
                        this.doHandle(params)
                      } else {
                        this.lookHandleRes(params)
                      }
                    }
                  }
                }, this.processingView === 0 ? '处理' : '查看')
              ])
            }
          }
        ],
        alarmTable: [],
        // 处理模态框的显示
        handleMod: false,
        dealWay: '',
        dealPeople: '',
        dealId: '',
        // 查看处理模态框的显示
        viewMod: false,
        viewObj: {
          handleRes: '',
          handleMan: ''
        },
        /* 报警页面数据 end */
        // 弹窗开始
        lineLoading: {
          lineEcharts: false,
          btnActiveForm: false,
          btnSubmit: false
        },
        lineTitle: {
          id: null,
          name: '',
          status: 2,
          itemData: []
        },
        btnText: [{value: 1, label: '温度走势'}, {value: 2, label: '报警预设'}],
        btnActive: 1,
        // initLineDate: [new Date().format('yyyy-MM-dd'), new Date().format('yyyy-MM-dd')],
        // 报警预设的数组
        alarmPresetList: {
          temperDiffer: 0,
          aUpperLimit: 0,
          aLowerLimit: 0,
          aTimeLimit: 0,
          aTemperRise: 0,
          bUpperLimit: 0,
          bLowerLimit: 0,
          bTimeLimit: 0,
          bTemperRise: 0,
          cUpperLimit: 0,
          cLowerLimit: 0,
          cTimeLimit: 0,
          cTemperRise: 0
        }
        // end
      }
    },
    // 组件
    components: {MDatePicker, MHeader, mTabs, LineEcharts},
    // 注意，不应该使用箭头函数来定义 methods函数 或者  computed函数 (例如 aDouble: () => this.a * 2)。
    // 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
    // 方法
    methods: {
      refreshData () {
        this.getMainPageData()
        timerFun(this, 'statusTime', 'alarmStatus', 2000)
      },
      // 报警灯 声音开始
      playWarnVoice () {
        if (this.voiceObj == null) {
          this.voiceObj = document.getElementById('mff')
        }
        if (!this.alarmLight) {
          this.voiceObj.play()
        } else {
          this.voiceObj.pause()
        }
      },
      // stopPlayVoice () {
      //   // 停止播放报警
      //   if (this.voiceObj == null) {
      //     this.voiceObj = document.getElementById('mff')
      //   }
      //   if (this.alarmLight) {
      //     this.voiceObj.pause()
      //   }
      // },
      // end
      /*
      * 内容头部方法start
      * */
      // 请求头部车间列表的方法
      async getMainPageData () {
        // 下拉列表数据
        this.workshopArr = await this.getTabList({type: 1, id: 115}).then(res => res)
        this.workshop = this.workshopArr[0].value
        // 母线设备以及 俩个 列表的各个数据
        this.asyncWorkShop(this.workshop)
      },
      // 车间更换的 异步函数
      async asyncWorkShop (id) {
        // 按钮数据
        let btnData = await this.getTabList({type: 2, id: id}).then(res => res)
        this.btnTextList = btnData
        this.activeBtnName = btnData[0].value
        // 母线设备数据
        this._controllersTimer(this.activeBtnName)
      },
      // 报警灯 复位方法
      alarmStatus () {
        window.myapi.alarmStatus().then(res => {
          // console.log(res)
          if (res.data.status === 200) {
            this.alarmLight = res.data.data
            this.playWarnVoice()
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 主要内容 下面的 俩行 列表的方法
      async _controllersTimer (id) {
        let listData = await this.getDevName(id)
        this.mainTotalPage = listData.totalPages
        this.devicesData = listData.content
        let listDataCopy = listData.content.slice()
        if (listDataCopy.length && listDataCopy.length < 20) {
          // 索引
          let index = listDataCopy.length
          // 已有的数据
          let devData = listDataCopy
          // 需要填充的空数据
          let obj = {
            id: null,
            name: '',
            status: 2,
            itemData: [{value: '', status: ''}, {value: '', status: ''}, {value: '', status: ''}, {
              value: '',
              status: ''
            }]
          }
          // 创建(20 - index) 个数据的数组
          let deviceArr = Array.from(Array(20 - index), (v, k) => k)
          // 填充够20数据
          listDataCopy = devData.concat(deviceArr).fill(obj, index)
        }
        // 切割 数据 分上下 各10个
        let average = Math.ceil(listDataCopy.length / 2)
        this.deviceArr2 = listDataCopy.splice(average)
        this.deviceArr1 = listDataCopy
        let idArrs = this.devicesData.filter(item => {
          if (item.id) return item
        }).map(v => v.id)
        // 定时器计数的
        // 请求单个设备的 数据
        for (let i = 0; i < idArrs.length; i++) {
          if (idArrs[i]) {
            (() => {
              setTimeout(() => {
                // 单个设备 请求的方法
                window.myapi.singleDevice({id: idArrs[i]}).then(res => {
                  if (res.data.status === 200) {
                    this.deviceArr1 = this.deviceArr1.map(item => {
                      if (item.id === res.data.data.id) {
                        item = {...item, ...res.data.data}
                      }
                      return item
                    })
                    this.deviceArr2 = this.deviceArr2.map(item => {
                      if (item.id === res.data.data.id) {
                        item = {...item, ...res.data.data}
                      }
                      return item
                    })
                  }
                }).catch((e) => {
                })
              }, 200 * i)
            })()
          }
        }
        //     time()
        //   }, s)
        // }
        // 定时器开关
        // time()
        timerFun(this, 'conTimer', 'timerUpdate', 5000)
      },
      // 定时器刷新 的方法
      timerUpdate () {
        let idArrs = this.devicesData.filter(item => {
          if (item.id) return item
        }).map(v => v.id)
        // 请求单个设备的 数据
        for (let i = 0; i < idArrs.length; i++) {
          if (idArrs[i]) {
            (() => {
              setTimeout(() => {
                // 单个设备 请求的方法
                window.myapi.singleDevice({id: idArrs[i]}).then(res => {
                  if (res.data.status === 200) {
                    this.deviceArr1 = this.deviceArr1.map(item => {
                      if (item.id === res.data.data.id) {
                        item = {...item, ...res.data.data}
                      }
                      return item
                    })
                    this.deviceArr2 = this.deviceArr2.map(item => {
                      if (item.id === res.data.data.id) {
                        item = {...item, ...res.data.data}
                      }
                      return item
                    })
                  }
                }).catch((e) => {
                })
              }, 800 * i)
            })()
          }
        }
      },
      // 车间以及按钮数组
      getTabList (param = {}) {
        return window.myapi.getEleTab(param).then(res => {
          // console.log(res)
          if (res.data.status === 200) {
            return res.data.data
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 俩行 各个设备的 接口 参数是通过 母线的 id
      getDevName (id) {
        let data = {
          id: id,
          page: this.pageNum,
          size: this.pageSize
        }
        return window.myapi.getEleDevice(data).then(res => {
          if (res.data.status === 200) {
            return res.data.data
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 车间 级别 下拉框 事件方法
      selectWorkshop (val) {
        this.workshop = val
        clearTimeout(this.conTimer)
        clearTimeout(this.statusTime)
        this.pageNum = 0
        // 车间级别的 更换
        this.asyncWorkShop(this.workshop)
        timerFun(this, 'statusTime', 'alarmStatus', 2000)
      },
      // 按钮切换方法
      toggleBtn (val, index) {
        if (this.activeBtnName === val) return false
        this.activeBtnName = val
        clearTimeout(this.conTimer)
        this.pageNum = 0
        //  上下 两行 各个 设备
        this._controllersTimer(this.activeBtnName)
      },
      // 点击报警信息按钮
      alarmMes () {
        if (this.activeBtnName === -1) return false
        this.activeBtnName = -1
        clearTimeout(this.conTimer)
        this.getAlarmList()
      },
      // 点击”设备诊断“按钮
      devDiagnose () {
        this.devdiagMod = true
        this.devNumber = ''
        this.tipMsg = ''
        this.category = '全部'
        this.modalContent = []
        this.diagDataStatus = []
        this.diagSelectData()
      },
      // 诊断弹框下拉选择方法
      selectCate (value) {
        this.category = value
        // this.category = selectObj.value
        // this.categoryLabel = selectObj.label
      },
      // 点击"诊断"按钮
      toDiagnose () {
        this.btnLoading = true
        this.findDevNum()
        this.modalContent = []
        this.diagDataStatus = []
      },
      // 获取诊断时间
      getDiagTime () {
        let date = new Date()
        let dateYear = date.getFullYear() // 获取年
        let dateMonth = date.getMonth() + 1 // 获取月
        let dateDate = date.getDate() // 获取日
        // let dateDay = date.getDay() // 获取当天星期
        let dateHours = date.getHours() // 获取小时
        let dateMinutes = date.getMinutes() // 获取分钟数
        let dateSecondes = date.getSeconds() // 获取秒数
        // let dateMilliseconds = date.getMilliseconds() // 获取毫秒数
        const formatNumber = n => {
          n = n.toString()
          return n[1] ? n : '0' + n
        }
        return `${dateYear}-${formatNumber(dateMonth)}-${formatNumber(dateDate)} ${formatNumber(dateHours)}:${formatNumber(dateMinutes)}:${formatNumber(dateSecondes)}`
      },
      // 诊断下拉框数据的方法
      diagSelectData () {
        window.myapi.SelectData().then(res => {
          // console.log(res)
          if (res.data.status === 200) {
            let data = res.data.data
            // unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。
            res.data.data.unshift({label: '全部', value: '全部'})
            this.diagSelectArr = data
          }
        })
      },
      // 查询设备名称或设备编号是否存在
      findDevNum () {
        let params = {nameSn: this.devNumber}
        window.myapi.diagnosisDev('findIotDev', params).then(res => {
          // console.log(res)
          if (res.status === 200) {
            if (res.data.status === 200) {
              this.tipMsg = ''
              this.getDiagnosisData()
            } else {
              // console.log(res)
              this.tipMsg = res.data.msg
              // this.$Notice.warning({
              //   title: '提示',
              //   desc: res.data.msg
              // })
              this.btnLoading = false
            }
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      async getDiagnosisData () {
        let params = {
          nameSn: this.devNumber,
          item: this.category
        }
        // 系统诊断
        let systemStatus = await this.diagnosisSys(params).then(res => {
          return {...res, time: this.getDiagTime()}
        })
        this.modalContent = [{...systemStatus}]
        // 网络诊断
        if (systemStatus.status !== 200) {
          this.btnLoading = false
          return false
        }
        /* let networkStatus = await this.diagnosisNetwork(params).then(res => {
          return {...res, time: this.getDiagTime()}
        })
        this.modalContent.push(networkStatus)
        if (networkStatus.status !== 200) {
          this.btnLoading = false
          return false
        } */
        // 设备在线诊断
        let onlineStatus = await this.diagnosisOnline(params).then(res => {
          return {...res, time: this.getDiagTime()}
        })
        this.modalContent.push(onlineStatus)
        if (onlineStatus.status !== 200) {
          this.btnLoading = false
          return false
        }
        // 数据诊断
        let dataObj = await this.diagnosisData(params).then(res => res)
        this.diagDataStatus = dataObj.data.map(item => {
          return {
            ...item, time: this.getDiagTime()
          }
        })
        this.btnLoading = false
      },
      // 诊断系统情况
      diagnosisSys (data) {
        return window.myapi.diagnosisDev('systemDiagnosis', data).then(res => {
          if (res.status === 200) {
            return res.data
          }
        })
      },
      // 诊断网络情况
      diagnosisNetwork (data) {
        return window.myapi.diagnosisDev('networkDiagnosis', data).then(res => {
          if (res.status === 200) {
            return res.data
          }
        })
      },
      // 诊断在线情况
      diagnosisOnline (data) {
        return window.myapi.diagnosisDev('onlineDiagnosis', data).then(res => {
          if (res.status === 200) {
            return res.data
          }
        })
      },
      // 诊断数据情况
      diagnosisData (data) {
        return window.myapi.diagnosisDev('dataDiagnosis', data).then(res => {
          if (res.status === 200) {
            return res.data
          }
        })
      },
      /*
      * 内容头部方法 end
      * */
      //
      /*
      * 主页方法 start
      * */
      // 图片过滤
      filterImg (status) {
        return require(`../../assets/waterImg/icon_device${status}.png`)
      },
      // 关闭弹框
      closeModel () {
        this.showAlarmMod = false
        this.handleMod = false
        this.viewMod = false
        this.devdiagMod = false
      },
      // 点击报警图标查看 报警列表 为6个
      clickAlertIcon () {
        if (!this.alarmLight) {
          this.showAlarmMod = true
          let params = {
            // workshopId: this.workshop,
            page: 0,
            size: 6
          }
          window.myapi.getAlarmList(params).then(res => {
            if (res.data.status === 200) {
              this.tableData = res.data.data.content
            }
          }).catch(function (e) {
            // console.log(e)
          })
        }
      },
      // 点击复位图标
      recover () {
        this.alarmLightLoading = true
        window.myapi.resetAlarm().then(res => {
          if (res.data.status === 200) {
            this.alarmLightLoading = false
            this.$Notice.success({
              title: '提示',
              desc: `复位报警源成功...`
            })
            this.showAlarmMod = false
            this.alarmStatus()
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 点击设备图标显示弹框
      clickDeviceIcon (item) {
        this.lineTitle = item
        this.lineLoading.lineEcharts = true
        // 供电系统 俩行 列表的 每个设备弹窗的接口数据
        this.eleLineEcharts(this.lineTitle.id)
      },
      upPage () {
        this.pageNum--
        clearTimeout(this.conTimer)
        //  上下 两行 各个 设备
        this._controllersTimer(this.activeBtnName)
      },
      drownPage () {
        this.pageNum++
        clearTimeout(this.conTimer)
        //  上下 两行 各个 设备
        this._controllersTimer(this.activeBtnName)
      },
      /*
      * 主页方法 end
      * */
      /*
      * 报警页方法 start
      * */
      // 搜索输入框的方法
      searchClick () {
        this.totalPage.current = 1
        this.getAlarmList()
      },
      // 选择分类的 下拉框的方法
      selectAll (val) {
        this.classify = val.value
        this.classifyLabel = val.label
        this.totalPage.current = 1
        this.getAlarmList()
      },
      // 分页改变的方法
      pageChange (val) {
        this.totalPage.current = val
        this.getAlarmList()
      },
      // 左侧按钮 实时信息和归档信息的 点击方法
      clickBtnChange (item) {
        if (this.processingView === item.id) return false
        this.processingView = item.id
        this.totalPage.current = 1
        this.getAlarmList()
      },
      // 日期改变的 方法
      // dateChange (val) {
      //   this.initDate = val
      //   this.totalPage.current = 1
      //   this.getAlarmList()
      // },
      // 开始时间选项 改变的方法
      startChange (val) {
        this.startTime = val
        this._commonDate()
      },
      _commonDate () {
        if (compareValue(this.startTime, this.endTime)) {
          this.totalPage.current = 1
          this.getAlarmList()
        } else {
          this.alarmTable = []
          this.$Notice.warning({
            title: '提示',
            desc: '开始时间必须小于结束时间...'
          })
        }
      },
      // 结束时间选项 改变的方法
      endChange (val) {
        this.endTime = val
        this._commonDate()
      },
      // 下载表格
      downForm (params = {}) {
        this.lineLoading.btnActiveForm = true
        window.myapi.downBusDevData(params).then(res => {
          if (res.status === 200) {
            let url = window.URL.createObjectURL(new Blob([res.data], {type: res.data.type}))
            let filename = decodeURI(res.headers['content-disposition'].split(';')[1].trim().substr(
              'filename='.length))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', filename)
            document.body.appendChild(link)
            link.click()
            this.lineLoading.btnActiveForm = false
          } else {
            let msg = res.data.msg ? res.data.msg : '请求数据失败!'
            this.$Message.error({content: msg, duration: 5, closable: true})
          }
        }).catch(function (e) {
        })
      },
      /*
      *  每个设备弹窗 开始
      * */
      // 报警预设 提交按钮 的接口
      submitClick () {
        if (Number(this.alarmPresetList.aLowerLimit) > Number(this.alarmPresetList.aUpperLimit)) {
          this.$Notice.warning({
            title: '提示',
            desc: `A相温度的 温度下限 必须小于 温度上限...`
          })
          return false
        }
        if (Number(this.alarmPresetList.bLowerLimit) > Number(this.alarmPresetList.bUpperLimit)) {
          this.$Notice.warning({
            title: '提示',
            desc: `B相温度的 温度下限 必须小于 温度上限...`
          })
          return false
        }
        if (Number(this.alarmPresetList.cLowerLimit) > Number(this.alarmPresetList.cUpperLimit)) {
          this.$Notice.warning({
            title: '提示',
            desc: `C相温度的 温度下限 必须小于 温度上限...`
          })
          return false
        }
        this.lineLoading.btnSubmit = true
        let params = {...this.alarmPresetList, id: this.lineTitle.id}
        window.myapi.alarmTemUpdate(params).then(res => {
          if (res.data.status === 200) {
            this.$Notice.success({
              title: '提示',
              desc: `修改参数成功...`
            })
            this.lineLoading.lineEcharts = false
            this.btnActive = 1
          } else {
            this.$Notice.error({
              title: '提示',
              desc: res.data.msg
            })
          }
          this.lineLoading.btnSubmit = false
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 关闭弹窗的
      lineEchartsChange () {
        this.lineLoading.lineEcharts = false
        if (this.btnActive === 2) this.btnActive = 1
      },
      maskClose () {
        this.lineLoading.lineEcharts = false
        if (this.btnActive === 2) this.btnActive = 1
      },
      // 供电系统 俩行 列表的 每个设备弹窗的接口数据
      eleLineEcharts (id) {
        // let [startTime, endTime] = this.initLineDate
        let params = {
          id: id,
          startTime: this.startLineTime,
          endTime: this.endLineTime
        }
        window.myapi.eleLineEcharts(params).then(res => {
          if (res.data.status === 200) {
            // console.log(res.data.data)
            this.$nextTick(() => {
              this.initLineChart(res.data.data)
            })
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 弹窗时间更换的 方法
      // 开始时间选项 改变的方法
      startChangeEcharts (val) {
        this.startLineTime = val
        this.commonDate()
      },
      commonDate () {
        if (this.btnActive === 1) {
          if (compareValue(this.startLineTime, this.endLineTime)) {
            this.eleLineEcharts(this.lineTitle.id)
          } else {
            this.$Notice.warning({
              title: '提示',
              desc: '开始时间必须小于结束时间...'
            })
          }
        } else {
          return false
        }
      },
      // 结束时间选项 改变的方法
      endChangeEcharts (val) {
        this.endLineTime = val
        this.commonDate()
      },
      // dateEchartsChange (val) {
      //   this.initLineDate = val
      //   this.eleLineEcharts(this.lineTitle.id)
      // },
      // 切换 温度走势 和 报警预设的按钮
      changeBtn (val) {
        if (val === this.btnActive) return false
        this.btnActive = val
        if (this.btnActive === 1) {
          this.eleLineEcharts(this.lineTitle.id)
        } else {
          window.myapi.alarmTem({id: this.lineTitle.id}).then(res => {
            if (res.data.status === 200) {
              this.alarmPresetList = {...res.data.data}
            }
          }).catch(function (e) {
            // console.log(e)
          })
        }
      },
      // 下载表格
      echartsDownForm () {
        // let [startTime, endTime] = this.initLineDate
        let params = {
          id: this.lineTitle.id,
          startTime: this.startLineTime,
          endTime: this.endLineTime
        }
        this.downForm(params)
      },
      // end
      // 折线图表
      initLineChart (data) {
        let dom = this.$refs.line.$refs.lineChart
        let myChart = echarts.init(dom)
        let option = {
          color: ['#E6BB0D', '#0FE73C', '#F1191A'],
          title: {
            show: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            backgroundColor: '#fff',
            textStyle: {
              color: '#333',
              fontSize: 12
            }
          },
          // tooltip: {
          //   trigger: 'axis',
          //   axisPointer: {
          //     type: 'cross',
          //     animation: false,
          //     label: {
          //       backgroundColor: '#ccc',
          //       borderColor: '#aaa',
          //       borderWidth: 1,
          //       shadowBlur: 0,
          //       shadowOffsetX: 0,
          //       shadowOffsetY: 0,
          //       textStyle: {
          //         color: '#222'
          //       }
          //     }
          //   },
          //   formatter: function (params) {
          //     return params[2].name + '<br />' + params[2].value
          //   }
          // },
          legend: {
            show: true,
            data: ['A相温度', 'B相温度', 'C相温度'],
            inactiveColor: '#2c448a',
            textStyle: {
              fontSize: 14, // 字体大小
              color: '#fff'
            },
            // padding: [20, 0],
            itemGap: 10 // 设置间距
            // icon: 'square' // 正方形
          },
          grid: {
            top: '10%',
            bottom: '12%',
            left: '2%',
            right: '3%',
            containLabel: true
          },
          // toolbox: {
          //   height: 30,
          //   top: '-1%',
          //   right: '2%',
          //   feature: {
          //     saveAsImage: {
          //       backgroundColor: '#15295f',
          //       iconStyle: {
          //         borderColor: '#fff',
          //         borderWidth: 2
          //       }
          //     }
          //   }
          // },
          xAxis: {
            type: 'time',
            name: '(h)',
            nameGap: 30,
            nameTextStyle: {
              color: '#fff',
              padding: [50, 0, 0, 0]
            },
            boundaryGap: ['20%', '20%'],
            // boundaryGap: false,
            // data: Array.from({length: 60}, (v, k) => k + 1),
            // data: Array.from(Array(12), (v, k) => {
            //   if (k < 9) return '0' + (k + 1)
            //   return '' + (k + 1)
            // }),
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6',
                width: 2
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              color: '#fff',
              // interval: 3,
              margin: 20
              // formatter: (value, index) => {
              //   console.log(value)
              //   console.log(index)
              // }
            },
            axisTick: {
              // show: false,
              length: 10,
              alignWithLabel: true,
              lineStyle: {
                color: '#8C99B6'
              }
            }
          },
          yAxis: {
            type: 'value',
            show: true,
            name: '( ℃ )',
            // nameLocation: 'middle',
            nameTextStyle: {
              color: '#fff',
              padding: [0, 50, 0, 0],
              fontSize: 14
            },
            nameGap: 20,
            // min: 0,
            // max: 250,
            // scale: true,
            position: 'left',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                show: false,
                color: '#8C99B6'
                // opacity: 0
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#8C99B6'
              }
            },
            axisTick: {
              length: 0,
              show: false
            },
            axisLabel: {
              inside: false,
              margin: 15,
              show: true,
              color: '#fff',
              formatter: (value) => {
                if (value >= 10000 && value < 10000000) {
                  value = value / 10000 + '万'
                } else if (value >= 10000000 && value < 100000000) {
                  value = value / 10000000 + '千万'
                } else if (value >= 100000000) {
                  value = value / 100000000 + '亿'
                }
                return value
              }
            }
          },
          dataZoom: [
            {
              type: 'inside'
            },
            {
              type: 'slider',
              textStyle: {
                color: '#fff'
              },
              fillerColor: 'rgba(42,80,155,1)',
              opacity: 0.4,
              borderColor: 'rgba(255, 255, 255, 0.4)',
              // backgroundColor: '#4C90FD',
              handleStyle: {
                color: 'rgba(76,144,253,1)'
              },
              left: '20%',
              right: '20%',
              height: 30
            }
          ],
          series: [
            {
              name: 'A相温度',
              // smooth: true,
              type: 'line',
              // showSymbol: false,
              // yAxisIndex: 0,
              // stack: '总量',
              // color: '#7489F6',
              // lineStyle: '#7489F6',
              // areaStyle: {
              //   color: '#2B4298'
              // },
              data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 31]
            },
            {
              name: 'B相温度',
              // smooth: true,
              type: 'line',
              // showSymbol: false,
              // yAxisIndex: 1,
              // stack: '总量',
              // color: '#43CCBA',
              // lineStyle: {
              //   color: '#43CCBA'
              // },
              // areaStyle: {
              //   color: '#246198'
              // },
              data: [0, 0, 0, 0, 0, 230, 210, 90, 230, 210, 90, 230]
            },
            {
              name: 'C相温度',
              // smooth: true,
              type: 'line',
              // showSymbol: false,
              // yAxisIndex: 2,
              // stack: '总量',
              // color: '#43CCBA',
              // lineStyle: {
              //   color: '#43CCBA'
              // },
              // areaStyle: {
              //   color: '#246198'
              // },
              data: [0, 0, 100, 0, 0, 330, 200, 70, 210, 240, 50, 30]
            }
          ]
        }
        option.legend.data = data.legend
        // option.xAxis.data = data.xAxis
        option.series = data.series.map(item => {
          let obj = {
            name: item.name,
            data: item.data,
            type: 'line'
            // showSymbol: false
          }
          return obj
        })
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      },
      // end
      doHandle (params) {
        this.handleMod = true
        this.dealId = params.row.id
      },
      lookHandleRes (params) {
        this.viewMod = true
        this.viewObj.handleMan = params.row.dealPeople
        this.viewObj.handleRes = params.row.dealResult
      },
      // 确定
      confirmSub () {
        if (this.dealWay.replace(/\s+/g, '') === '') {
          this.$Notice.warning({
            title: '提示',
            desc: '处理结果不能为空'
          })
          return false
        }
        if (this.dealPeople.replace(/\s+/g, '') === '') {
          this.$Notice.warning({
            title: '提示',
            desc: '处理人不能为空'
          })
          return false
        }
        let params = {
          id: this.dealId,
          dealPeople: this.dealPeople,
          dealResult: this.dealWay
        }
        window.myapi.dealAlarm(params).then(res => {
          if (res.data.status === 200) {
            this.$Notice.success({
              title: '提示',
              desc: '处理成功...'
            })
            this.getAlarmList()
            this.handleMod = false
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      //
      /*
      * 报警方法 end
      * */
      /**
       * 报警信息开始
       * */
      getAlarmList () {
        this.alarmTable = []
        // let [startTime, endTime] = this.initDate
        let params = {
          workshopId: this.workshop,
          fuzzySearch: this.searchAlarm,
          alarmClassify: this.classifyLabel === '全部' ? '' : this.classifyLabel,
          isOperation: this.processingView,
          startTime: this.startTime,
          endTime: this.endTime,
          page: this.totalPage.current - 1,
          size: this.totalPage.pageSize
        }
        if (compareValue(this.startTime, this.endTime)) {
          window.myapi.getAlarmList(params).then(res => {
            if (res.data.status === 200) {
              this.alarmTable = res.data.data.content
              this.totalPage.total = res.data.data.totalElements
            }
          }).catch(function (e) {
            // console.log(e)
          })
        } else {
          this.$Notice.warning({
            title: '提示',
            desc: '开始时间必须小于结束时间...'
          })
        }
      }
    },
    // 计算属性
    computed: {
      // ...mapState('user', {
      //     facilitys: state => state.facilitys
      // })
    },
    // 监听
    watch: {
      // 监听路由变化
    },
    // 常用钩子函数，总共有8个，可以参照vue的生命周期看
    // 完成了 data 数据的初始化，el没有，就是说页面的dom没有完成转化，还是 {{data}} 这种
    created () {
    },
    // 完成挂载，相当于dom ready
    mounted () {
      this.refreshData()
    },
    // 销毁，可以做一些定时器的销毁,缓存的清除等操作
    destroyed () {
      clearTimeout(this.conTimer)
      clearTimeout(this.statusTime)
      this.voiceObj = null
    }
  }
</script>

<style lang="scss">
  #water {
    @include system-bg;
    font-family: PingFang SC !important;

    .ivu-btn-primary {
      background: rgba(76, 144, 253, 1);
    }

    .ivu-btn-warning {
      background: rgba(255, 137, 21, 1);
    }

    .ivu-btn-primary, .ivu-btn-warning {
      border-radius: 2px;
    }

    .ivu-btn-warning:hover {
      background-color: rgba(255, 137, 21, 1);
      border-color: rgba(255, 137, 21, 1);
    }

    .ivu-btn-primary:hover {
      background-color: rgba(76, 144, 253, 1);
      border-color: rgba(76, 144, 253, 1);
    }

    @mixin selectedBtn {
      .ivu-select-single .ivu-select-selection {
        height: 40px;
        width: 130px;
        border-radius: 2px;
        background: rgba(76, 101, 253, 1);
        /*border: 1px solid rgba(76, 101, 253, 1);*/
        border: none;
        color: #fff;
      }
      .ivu-select-arrow {
        color: #fff;
        right: 10px;
      }
      .ivu-icon-ios-arrow-down:before {
        content: "\F33D" !important;
      }
      .ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding-left: 16px;
      }
      .ivu-select-dropdown {
        color: #fff;
        background: rgba(25, 55, 119, 1);
        width: 130px;
        border-radius: 2px;
        border: 1px solid rgba(76, 101, 253, 1);
      }
      .ivu-select-dropdown-list {
        min-width: 100%;
        list-style: none;
        height: 136px;
      }
      .ivu-select-item {
        height: 40px;
        padding: 10px 16px;
        color: #fff;
        font-size: 14px !important;
      }
      .ivu-select-item:hover {
        background: rgba(19, 45, 117, 1);
      }
      .ivu-select-item-focus {
        background: rgba(19, 45, 117, 1);
      }
      .ivu-select-dropdown::-webkit-scrollbar {
        width: 4px;
        /*background: rgba(76, 101, 253, 1);*/
      }
      .ivu-select-dropdown:hover::-webkit-scrollbar-thumb {
        background-color: rgba(20, 109, 255, 0.6);
        border-radius: 10px;
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
        -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
      }
    }

    .electr-content {
      width: 1800px;
      margin: 0 auto;

      .col-fff {
        margin-bottom: 10px;
        height: 80px;
        padding: 20px 30px;
        background: $same-bgc;
      }

      .electr-head {
        .ivu-btn {
          font-size: 14px;
        }

        /*下拉选择器样式替换 start */
        @include selectedBtn;
        /* end */
        .sele-btn {
          float: left;
          display: flex;
        }

        .alarm {
          float: right;
          display: flex;

          .alert-img {
            width: 40px;
            height: 40px;
            background: url('../../assets/waterImg/btn_alert_default.png') no-repeat;
            margin-right: 30px;
            cursor: pointer;
          }

          /*报警动画的类*/
          .alarmLight {
            animation: gradientChange .3s infinite alternate;
            @keyframes gradientChange {
              0% {
                background: url('../../assets/waterImg/btn_alert_selected1.png') no-repeat;
              }
              100% {
                background: url('../../assets/waterImg/btn_alert_selected.png') no-repeat;
              }
            }
          }

          .alert-num {
            position: absolute;
            top: -8px;
            right: 12px;
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            text-align: center;
            line-height: 15px;
            background: rgba(241, 25, 26, 1);
            font-size: 10px;
          }
        }
      }

      .electr-main {
        /* 主页面样式 */
        .workshop-page {
          padding: 74px 24px 48px;
          position: relative;
          height: 804px;
          background: $same-bgc;
          color: #fff;

          .up-list {
            display: flex;
            font-size: 14px;

            .row-lt {
              width: 112px;
              margin-right: 10px;

              .list-status {
                width: 112px;
                /*flex: 0 0 112px;*/
                height: 74px;
                /*flex-direction: column;*/
                /*text-align: left;*/
                font-size: 14px;
                font-weight: normal;
                padding-left: 32px;
                padding-top: 22px;
                background-color: rgba(25, 55, 119, 1);

                p {
                  height: 20px;
                  line-height: 20px;

                  span {
                    margin-right: 6px;
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    padding: 0;
                  }
                }

                p:nth-child(1) {
                  span {
                    background-color: rgba(77, 144, 251, 1);
                  }
                }

                p:nth-child(2) {
                  span {
                    background-color: rgba(241, 25, 26, 1);
                  }
                }
              }

              /*.alarm-red {*/
              /*  color: rgba(241, 25, 26, 1);*/
              /*}*/
              .col-text {
                li {
                  line-height: 56px;
                  text-align: center;
                  border-top: 2px solid rgba(35, 74, 154, 1);
                  height: 56px;
                }

                li:nth-of-type(odd) {
                  background: rgba(29, 60, 125, 1);
                }

                li:nth-of-type(even) {
                  background: rgba(29, 60, 125, 0.6);
                }
              }
            }

            .row-rt {
              display: flex;

              .col-item {
                width: 154px;
                margin-right: 10px;

                .col-img {
                  position: relative;
                  height: 74px;
                  background-color: rgba(25, 55, 119, 1);
                  text-align: center;
                  cursor: pointer;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  img {
                    position: absolute;
                    top: -30%;
                    left: 30%;
                  }

                  span {
                    color: rgba(76, 144, 253, 1);
                    padding-top: 28px;
                  }
                }

                .col-text {
                  li {
                    line-height: 56px;
                    text-align: center;
                    border-top: 2px solid rgba(35, 74, 154, 1);
                    height: 56px;
                  }

                  li:nth-of-type(1) {
                    padding: 0 12px;
                    display: flex;
                    line-height: 1.5;
                    justify-content: center;
                    align-items: center;
                  }

                  li:nth-of-type(odd) {
                    background: rgba(29, 60, 125, 1);
                  }

                  li:nth-of-type(even) {
                    background: rgba(29, 60, 125, 0.6);
                  }
                }
              }

              .col-item:nth-last-of-type {
                margin-right: 0;
              }
            }
          }

          .down-list {
            margin-top: 86px;
          }

          /*分页按钮*/
          .paging-btn {
            cursor: pointer;
            position: absolute;
            bottom: 48px;
            right: -50px;
            height: 50px;
            width: 50px;
            padding: 10px 4px;
            /*background: rgba(113, 122, 151, 0.3);*/
            background: rgba(50, 64, 113, 0.9);
            border-radius: 0 5px 5px 0;

            .up-btn {
              margin-right: 2px;
            }

            .drown-btn {
            }
          }
        }

        /*报警模态框*/
        .model-bg {
          @include modalFixed;

          .alarm-model {
            padding-top: 120px;
            background: $modelbg;
            width: 1052px;
            height: 538px;
            color: $font-f;
            position: relative;

            .model-close {
              @include modelClose;
            }

            .big-electr-icon {
              position: absolute;
              top: -50px;
              right: 470px;
              font-size: 24px;
              text-align: center;
              color: rgba(255, 255, 255, 0.3);

              .icon-off {
                width: 110px;
                height: 110px;

                &:hover {
                  cursor: pointer;
                }
              }

              p {
                margin-top: 2px;
                color: $font-f;
              }
            }

            .model-table {
              /*position: absolute;*/
              /*bottom: 60px;*/
            }
          }
        }

        /*设备诊断弹框*/
        .model-bg {
          @include modalFixed;
          z-index: 4;

          .diagnose-model {
            width: 780px;
            height: 560px;
            padding: 60px;
            background: $modelbg;
            position: relative;

            .model-close {
              @include modelClose;
            }

            .model-top {
              display: flex;
              justify-content: space-between;

              .model-title {
                color: #fff;
                font-size: 24px;

                span {
                  display: inline-block;
                  width: 3px;
                  height: 23px;
                  background: rgba(67, 204, 186, 1);
                  margin: 6px 20px 0 0;
                  vertical-align: top;
                }
              }

              .dev-num {
                margin-top: 10px;
                font-size: 14px;
                color: rgba(255, 255, 255, 1);

                .ivu-input {
                  width: 160px;
                  height: 40px;
                  background: rgba(255, 255, 255, 0.1);
                  border: none;
                  border-radius: 0;
                  padding: 6px 14px;
                  font-size: 12px;
                  color: #fff; // 文本的颜色
                  caret-color: rgba(76, 144, 253, 1); // 光标的颜色
                }

                input::-webkit-input-placeholder {
                  color: rgba(255, 255, 255, 0.1);
                }

                @include selectedBtn;

                .ivu-select-single .ivu-select-selection {
                  width: 110px;
                  border-radius: 2px;
                  background: rgba(76, 144, 253, 1);
                }

                .ivu-select-dropdown {
                  width: 110px;
                  border: 1px solid rgba(76, 144, 253, 1);
                }

                .ivu-select-disabled .ivu-select-selection {
                  /*#1D4394  */
                  background: #1D4394;
                  color: rgba(255, 255, 255, 0.4);
                }

                .ivu-select-disabled .ivu-select-selection .ivu-select-arrow {
                  color: rgba(255, 255, 255, 0.4);
                }
              }

              .input-color {
                .ivu-input {
                  color: rgba(255, 255, 255, 0.4); // 文本的颜色
                }
              }
            }

            .model-center {
              font-size: 16px;
              color: #fff;
              padding: 14px;
              width: 660px;
              height: 260px;
              margin-top: 40px;
              background: rgba(255, 255, 255, 0.1);

              .model-content {

                span {
                  margin-right: 22px;

                  em {
                    font-style: normal;
                    margin-left: 4px;
                  }
                }
              }
            }

            .btn-defsize {
              .ivu-btn {
                font-size: 20px;
              }
            }

            .btn-dia {
              .ivu-btn-primary[disabled] {
                background: rgba(33, 66, 137, 1);
                border-color: rgba(33, 66, 137, 1);
                color: rgba(255, 255, 255, 0.4);
              }
            }

            .btn-load {
              .ivu-btn-primary {
                background: rgba(29, 67, 148, 1);
                border-color: rgba(29, 67, 148, 1);
                color: rgba(255, 255, 255, 0.4);
              }
            }

          }
        }

        /* 报警页面样式 */
        .alarm {
          padding: 30px 30px 26px 30px;
        }

        .alert-page {
          height: 804px;
          background: $same-bgc;
          color: #fff;

          .alarm-btn {
            display: inline-block;
            width: 80px;
            height: 40px;
            line-height: 38px;
            text-align: center;
            border: 1px solid rgba(76, 144, 253, 1);
            color: rgba(76, 144, 253, 1);
            font-size: 14px;
            border-radius: 2px 0px 0px 2px;
            /*background: #0c183e;*/

            &:hover {
              cursor: pointer;
            }
          }

          .alarm-btn0 {
            border-radius: 2px 0px 0px 2px;
          }

          .alarm-btn1 {
            border-radius: 0px 2px 2px 0px;
          }

          .alarm-btn-active {
            background: rgba(76, 144, 253, 1);
            color: $font-f;
          }

          #alarm-page {
            padding-top: 26px;
            text-align: center;

            .ivu-page-total {
              color: $font-f;
              font-size: 14px;
            }

            .ivu-page-options-elevator {
              color: $font-f;
              font-size: 14px;
            }

            .ivu-page-options-elevator input {
              background-color: rgba(76, 144, 253, 1);
              color: $font-f;
              text-align: center;
              border: 0;
            }

            .ivu-page-prev a, .ivu-page-next a {
              color: $font-f;
            }

            .ivu-page-prev, .ivu-page-next {
              background-color: rgba(76, 144, 253, 1);
              border: 0;
            }

            .ivu-page-item.ivu-page-item-active {
              border-color: rgba(255, 137, 21, 1);
              background-color: rgba(255, 137, 21, 1);
            }

            .ivu-page-item {
              border-color: rgba(76, 144, 253, 1);
              background-color: rgba(76, 144, 253, 1);
            }

            .ivu-page-item a {
              color: $font-f;
            }
          }

          #alarm-right {
            text-align: right;

            .alarm-all {
              display: inline-block;

              .ivu-select-single .ivu-select-selection {
                height: 40px;
                width: 110px;
                border-radius: 2px;
                background: #4c90fd;
                border: none;
                color: #fff;
              }

              .ivu-select-dropdown {
                width: 110px;
                border: 1px solid rgba(76, 144, 253, 1);
              }
            }

            > span {
              margin-right: 10px;
              font-size: 14px;
            }

            .alarm-input {
              display: inline-block;
              margin-right: 30px;

              .ivu-input-wrapper {
                width: 260px;
              }

              .ivu-input {
                background: rgba(15, 27, 67, 0.5);
                opacity: 0.7;
                color: #fff;
                border-radius: 20px;
                font-size: 14px;
                border: 0;
                height: 40px;
                line-height: 40px;
                text-align: left;
                padding-left: 15px;
              }

              .ivu-input-icon {
                font-size: 20px;
                color: $font-f;
                padding-top: 4px;
              }
            }

            .ivu-input {
              background: #0c183e;
              color: #fff;
              border-radius: 0px;
              font-size: 14px;
              border: 0;
              height: 40px;
              line-height: 40px;
            }

            .ivu-input-wrapper {
              width: 170px;
            }

            /*.ivu-input-prefix i, .ivu-input-suffix i {
              font-size: 22px;
              line-height: 38px;
              color: $font-f;
            }*/
            .ivu-icon-ios-calendar-outline {
              font-size: 22px;
              line-height: 38px;
              color: $font-f;
            }

            /*.ivu-date-picker .ivu-select-dropdown {*/
            /*  background-color: #4C90FD;*/
            /*}*/

            .downForm-btn {
              height: 40px;
              font-size: 14px;
              width: 110px;
              margin-left: 30px;
            }
          }

          .model-bg {
            @include modalFixed;
            /*查看模态框*/
            .look-model {
              padding: 20px 40px;
              height: 288px;
              width: 420px;
              background: $modelbg;
              position: relative;

              .model-close {
                @include modelClose;
              }

              .same-style {
                margin-top: 26px;

                h5 {
                  font-size: 20px;
                  color: rgba(125, 161, 255, 1);
                  font-weight: 500;
                }

                p {
                  margin-top: 12px;
                  margin-left: 16px;
                  font-size: 16px;
                  color: rgba(255, 255, 255, 1);
                }
              }

              .handle-man {
                margin-top: 40px;
              }
            }
          }

          .model-bg {
            @include modalFixed;
            z-index: 4;
            /*处理模态框*/
            .handle-model {
              background: $modelbg;
              width: 420px;
              height: 550px;
              padding: 60px;
              position: relative;

              .ivu-input {
                height: 180px;
                background: rgba(255, 255, 255, 0.1);
                border: none;
                border-radius: 0;
                padding: 6px 14px;
                font-size: 16px;
                color: #fff; // 文本的颜色
                caret-color: rgba(76, 144, 253, 1); // 光标的颜色
              }

              input::-webkit-input-placeholder {
                color: rgba(255, 255, 255, 0.1);
              }

              input:-moz-placeholder {
                color: rgba(255, 255, 255, 0.1);
              }

              input::-moz-placeholder {
                color: rgba(255, 255, 255, 0.1);
              }

              input:-ms-input-placeholder {
                color: rgba(255, 255, 255, 0.1);
              }

              textarea.ivu-input::-webkit-scrollbar {
                width: 4px;
              }

              textarea.ivu-input:hover::-webkit-scrollbar-thumb {
                background-color: rgba(20, 109, 255, 0.6);
                border-radius: 10px;
                -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
                -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
              }

              .model-close {
                @include modelClose;
              }

              h5 {
                font-size: 20px;
                color: rgba(125, 161, 255, 1);
                font-weight: 500;
                margin-bottom: 6px;
              }

              .handle-way {
                /* */
              }

              .handle-people {
                margin-top: 36px;

                .ivu-input {
                  height: 40px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
